<template>
    <div>
        <div class="flex history">
            <div><p>未结算金额</p><p>{{financial_money_0}}元</p></div>
            <div><p>未结算订单</p><p>{{financial_num_0}}单</p></div>
        </div>
        <div class="flex history">
            <div><p>已结算金额</p><p>{{financial_money_1}}元</p></div>
            <div><p>已结算订单</p><p>{{financial_num_1}}单</p></div>
        </div>
        <section class="login_message">
            <mt-button class="btn" @click="popupVisible = !popupVisible">筛选</mt-button>
        </section>
        <div class="order_list">
            <p class="order_title">历史订单</p>
            <div v-for="(item,index) of orderList" :key="index">
                <mt-cell :title="'订单编号:'+item.order_no"></mt-cell>
                <p class="order_cell">下单时间:{{ToTime(item.create_time)}}</p>
                <p class="order_cell flex">提货码:<span>{{item.code}}</span></p>
                <p class="order_cell flex">预期收入:<span>+<span class="money">{{item.store_price}}</span>元</span></p>
            </div>
            
            <p class="hint" v-if="!orderList.length">暂无{{start_date}}至{{end_date}}历史订单~</p>
        </div>
        <p class="all-price">查询总金额:<span class="price">{{AllPrice.toFixed(2)}}</span>元</p>
        <mt-popup
        v-model="popupVisible"
        class="inputBox"
        popup-transition="popup-fade">
            <section class="login_message">
                <p class="title">历史订单查询</p>
            </section>
            <section class="login_message">
                <input type="text" :value="getStatus(status,0)" readonly @click="selectStatus" placeholder="请选择需要查询的订单状态">
            </section>
            <section class="login_message">
                <input type="text" :value="getStatus(settle,1)" readonly @click="selectSettleStatus" placeholder="请选择需订单是否结算">
            </section>
            <section class="login_message">
                <input type="text" readonly :value="start_time" @click="openPicker" placeholder="请选择需要查询的订单开始日期">
            </section>
            <section class="login_message">
                <input type="text" readonly :value="end_time" @click="openPic"  placeholder="请选择需要查询的订单结束日期">
            </section>
            <section class="login_message">
                <mt-button class="btn" @click="getOrderList">查询</mt-button>
            </section>
        </mt-popup>
        <template>
            <mt-datetime-picker
                ref="picker"
                type="date"
                v-model="start_time"
                @confirm="getStartTime">
            </mt-datetime-picker>
            <mt-datetime-picker
                ref="pic"
                type="date"
                v-model="end_time"
                @confirm="getEndTime">
            </mt-datetime-picker>
            <mt-popup
            v-model="statusCheckBox"
            position="bottom">
                <div class="btn_group"><button @click="()=>{this.statusCheckBox = !this.statusCheckBox}">确认</button></div>
                <mt-checklist
                title="选择需要查看的订单状态"
                v-model="status"
                :max="1"
                :options="statusList">
                </mt-checklist>
            </mt-popup>
            <mt-popup
            v-model="settleCheckBox"
            position="bottom">
                <div class="btn_group"><button @click="()=>{this.settleCheckBox = !this.settleCheckBox}">确认</button></div>
                <mt-checklist
                title="选择订单结算状态"
                v-model="settle"
                :max="1"
                :options="settleList">
                </mt-checklist>
            </mt-popup>
        </template>
    </div>
</template>
<script>
import {orderRecord} from '../api'
import timestampToTime from '../time'
import {Toast} from 'mint-ui'
export default {
    data() {
        return {
            financial_money_0:0,
            financial_num_0:0,
            financial_money_1:0,
            financial_num_1:0,
            status:[5],
            settle:[2],
            statusCheckBox:false,
            settleCheckBox:false,
            orderList:[],
            settleList:[
                {value:"0",label:'未结算'},
                {value:"1",label:'已结算'},
                {value:"2",label:'全部'}
            ],
            statusList:[
                    {value:"1",label:'已接单'}, 
                    {value:"2",label:'等待配送'},
                    {value:"3",label:'已配送'},
                    {value:"4",label:'已送达'},
                    // {value:"5",label:'已签收'},
                    {value:"5,6,7",label:'已完成'}
                ],
            popupVisible:false,
            start_time:"",
            end_time:"",
            start_date:"",
            end_date:"",
            AllPrice:0
        }
    },
    created(){
        this.start_date = timestampToTime(new Date(new Date() - 24*60*60*1000));
        this.end_date = timestampToTime(new Date());
        this.getStartTime(new Date())
        this.getEndTime(new Date())
        this.status = ["5"];
        this.getOrderList();
    },
    methods:{
        getStatus(status,i){
            // console.log(status[0]);
            if(i){
                for(let i of this.settleList){
                    if(i.value == status[0]){
                        return i.label;
                    }
                }
            }else{
                for(let i of this.statusList){
                    if(i.value == status[0]){
                        return i.label;
                    }
                }
            }
        },
        selectStatus(){
            this.statusCheckBox=!this.statusCheckBox
            this.status = [];
        },
        selectSettleStatus(){
            this.settleCheckBox = !this.settleCheckBox;
            this.settle = [];
        },
        getStartTime(val){
            this.start_time = timestampToTime(val)
            this.start_date = timestampToTime(val)
        },
        getEndTime(val){
            this.end_time = timestampToTime(val)
            this.end_date = timestampToTime(val)
        },
        openPicker() {

            this.$refs.picker.open();
        },
        openPic() {
            this.$refs.pic.open();
        },
        ToTime(cjsj){
            let date = new Date(cjsj*1000);
            var Y = date.getFullYear() + '-'
            var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'
            var D = date.getDate()
            return Y+M+D
        },
        getOrderList(){
            const data = {
                token:this.$store.getters.token,
                status:this.status[0],
                start_time:this.start_time+' '+'00:00:00',
                end_time:this.end_time+' '+'23:59:59',
                financial_status:this.settle[0]
            }
            // console.log(data);
            this.popupVisible = false;
            if(!data.status){
                Toast("请选择需要查询的订单状态");
                return;
            }else if(!data.start_time){
                Toast("请选择需要查询的订单开始日期");
                return;
            }else if(!data.end_time){
                Toast("请选择需要查询的订单结束日期");
                return;
            }
            orderRecord(data).then(res=>{
                console.log(res);
                if(res.code == 200){
                    this.orderList = res.data.list;
                    this.financial_money_0 = res.data.financial_money_0
                    this.financial_num_0 = res.data.financial_num_0
                    this.financial_money_1 = res.data.financial_money_1
                    this.financial_num_1 = res.data.financial_num_1
                    this.AllPrice = 0;
                    for(let i of this.orderList){
                        this.AllPrice+=parseFloat(i.store_price);
                    }
                }else{
                    Toast("查询出错,请稍后再试")
                }
            })
            
        }
    }
}
</script>
<style scoped>
    .inputBox{
        width: 80%;
        border-radius: 10px;
    }
    .title{
        line-height: 2rem;
    }
    .order_title{
        font-weight: bolder;
        font-size: 1.5rem;
        padding-left: 1rem;
    }
    .hint{
        line-height: 6rem;
        text-align: center;
    }
    .order_cell{
        padding: 0 0.6rem;
    }
    .flex{
        display: flex;
        justify-content: space-between;
    }
    .money{
        color: red;
        font-size: 1.2rem;
        font-weight: bolder;
    }
    .history{
        justify-content: space-around;
        font-size: 1.2rem;
        line-height: 2rem;
        font-weight: bolder;
        text-align: center;
    }
    .btn{
        background: #F0463C;
        color: #fff;
    }
    .all-price{
        text-align: right;
        padding-right: 0.6rem;
        font-size: 1.5rem;
    }
    .all-price .price{
        font-weight: bold;
        color: #F0463C;
        line-height: 5rem;
    }
    .order_list{
        height: Calc(100vh - 21rem);
        overflow: auto;
    }
</style>